<template>
  <div>
    <h2>任务列表</h2>
    <table border="1" cellpadding="6" cellspacing="0">
      <thead>
        <tr>
          <th>ID</th><th>名称</th><th>方向</th><th>状态</th><th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="t in tasks" :key="t.id">
          <td>{{ t.id }}</td>
          <td><router-link :to="`/task/${t.id}`">{{ t.name }}</router-link></td>
          <td>{{ t.direction }}</td>
          <td>{{ t.status }}</td>
          <td>
            <button @click="start(t.id)">启动</button>
            <button @click="stop(t.id)">停止</button>
            <button @click="restart(t.id)">重启</button>
            <button @click="remove(t.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup lang="ts">
import axios from 'axios'
import { onMounted, ref } from 'vue'

interface Task { id:number; name:string; direction:string; status:string }
const tasks = ref<Task[]>([])
const load = async () => {
  const { data } = await axios.get('/api/tasks')
  tasks.value = data
}
const start = async (id:number) => { await axios.post(`/api/tasks/${id}/start`); await load() }
const stop = async (id:number) => { await axios.post(`/api/tasks/${id}/stop`); await load() }
const restart = async (id:number) => { await axios.post(`/api/tasks/${id}/restart`); await load() }
const remove = async (id:number) => { await axios.delete(`/api/tasks/${id}`); await load() }

onMounted(load)
</script>

